<template>
  <div class="group-add-box">
    <el-card class="group-add-card">
      <div class="group-add-form">
        <el-form :model="groupModel" :rules="rules" ref="groupAddRef" label-width="100px">

          <el-form-item label="群组名称:" prop="groupName">
            <el-input type="text" v-model.trim="groupModel.groupName" clearable></el-input>
          </el-form-item>

          <el-form-item label="群头像:" prop="groupAvatar">
            <el-upload
                class="avatar-uploader"
                action=""
                :show-file-list="false"
                :http-request="uploadAvatar">
              <img v-if="groupModel.groupAvatar" :src="groupModel.groupAvatar" class="groupAvatar"
                   v-model="groupModel.groupAvatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>


          <el-form-item label="群组成员:" prop="groupMember">
          </el-form-item>
        </el-form>
      </div>
      <div class="groupMember-left">
        <div class="groupMember-left-top">
          <span>全部人数({{ max }})</span>
          <el-button type="text" @click="checkAllMember">全选</el-button>
          <el-input
              class="queryMemberClass"
              placeholder="输入用户名"
              v-model="filterMember"
              clearable
          >
          </el-input>
        </div>
        <div class="groupMember-left-middle">
          <el-tree
              class="filter-tree"
              :data="allFriendTree"
              :props="memberProps"
              :filter-node-method="filterMemberMethod"
              @node-click="checkMemberMethod"
              ref="tree">
          </el-tree>
        </div>
      </div>
      <div class="groupMember-right">
        <div class="groupMember-right-top">
          <span>已选人数({{ min }})</span>
          <el-button type="text" @click="clearAllMember">清空</el-button>
        </div>

        <div class="groupMember-right-middle">
          <ul v-for="(item,index) in checkMemberModel" class="member-ul">
            <li>
              <div class="memberBox">
                <span class="member-username">{{ item.username }}</span>
                <el-avatar size="small" :src="item.avatar"
                           class="member-avatar"></el-avatar>
                <el-button type="danger" icon="el-icon-delete" circle size="mini" class="member-delete"
                           @click="clearOneMember(item.id)"></el-button>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="commit">
        <el-button type="primary" class="commit-button" @click="createGroup('groupAddRef')">创建群聊</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import {upload} from "@/utils/upload";
import {friendList} from '@/api/chat/index'
import {groupAdd} from '@/api/group/index'

export default {
  name: "index",
  data() {
    return {
      groupModel: {
        groupName: '',
        groupAvatar: '',
        userIds: []
      },
      rules: {
        groupName: [
          {
            required: true, message: '组名不能为空', trigger: 'blur'
          }
        ],
        groupAvatar: [
          {
            required: true, message: '组头像不能为空', trigger: 'blur'
          }
        ]
      },
      min: 0,
      max: 0,
      filterMember: '',
      allFriendTree: [],
      memberProps: {
        children: 'children',
        label: 'username'
      },
      checkMemberModel: []
    }
  },
  methods: {
    //上传群头像
    uploadAvatar(file) {
      upload(file.file).then(res => {
        if (res !== null) {
          this.groupModel.groupAvatar = res
        }
      }).catch(res => {

      })
    },
    //过滤好友列表
    filterMemberMethod(value, data) {
      if (!value) return true;
      return data.username.indexOf(value) !== -1
    },
    //树型点击事件
    checkMemberMethod(data) {
      let obj = this.checkMemberModel.find(item => item.id === data.id)
      if (obj === undefined) {
        this.checkMemberModel.push(data)
        this.min = this.checkMemberModel.length
      }
    },
    //清空选择的成员
    clearAllMember() {
      this.checkMemberModel = []
      this.min = 0
    },
    //清空单个数组
    clearOneMember(data) {
      this.checkMemberModel = this.checkMemberModel.filter((num, index) => {
            return num.id !== data
          }
      )
      this.min = this.checkMemberModel.length
    },
    //查询好友树列表信息
    friendTreeMethod() {
      friendList().then(res => {
        if (res.code === 200) {
          this.allFriendTree = res.data
          this.max = this.allFriendTree.length
        }
      }).catch(error => {

      })
    },
    //全选所有好友
    checkAllMember() {
      this.checkMemberModel = this.allFriendTree
    },
    createGroup(val) {
      this.$refs[val].validate((valid) => {
        if (this.checkMemberModel.length <= 0) {
          this.$message.warning("至少选择一个好友")
        }
        if (this.checkMemberModel.length > 0 && valid) {
          this.groupModel.userIds = this.checkMemberModel.map(item => item.userId)
          groupAdd(this.groupModel).then(res => {
            if (res.code === 200) {
              this.$message.success("创建成功")
              this.$refs[val].resetFields()
              this.groupModel.userIds = []
              this.clearAllMember()
            } else {
              this.$message.error("创建失败")
            }
          }).catch(error => {

          })
        }
      })
    }
  },
  mounted() {
    this.friendTreeMethod()
  },
  watch: {
    filterMember(val) {
      this.$refs.tree.filter(val);
    }
  },
}
</script>

<style scoped lang="scss">
.group-add-box {
  display: flex;
  height: 100%;
  width: 100%;
}

.group-add-card {
  flex: 10;
  margin: 20px;
  display: flex;
  justify-content: center;
  overflow: auto;
}

.group-add-form {
  flex: 10;
  width: 500px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.avatar {
  width: 60px;
  height: 60px;
  display: block;
}

.avatar-uploader {
  width: 60px;
  height: 60px;

  ::v-deep .el-upload {
    width: 60px;
    height: 60px;
  }

  img {
    max-width: 100%;
    max-height: 100%;
  }
}

.groupMember-left {
  position: relative;
  margin-right: 20px;
  width: 300px;
  height: 300px;
  float: left;
  background-color: #eaeaea;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;

  span {
    font-size: 14px;
    color: #606266;
    float: left;
  }

  .el-button {
    float: right;
    padding-top: 0;
    color: #4ccb69;
  }
}

.groupMember-right {
  width: 300px;
  height: 300px;
  float: right;
  background-color: #eaeaea;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;

  span {
    font-size: 14px;
    color: #606266;
  }
}

::v-deep .el-tree__empty-block {
  background-color: #eaeaea;
}


.groupMember-right-top {
  width: 100%;
  height: 20px;

  span {
    float: left;
  }

  ::v-deep .el-button {
    display: inline;
    float: right;
    padding: 0;
    color: #ff000d;
  }
}

.queryMemberClass {
  margin-top: 10px;
}

::v-deep.el-tree {
  background: none;
}

.groupMember-left-middle {
  width: 100%;
  height: 200px;
  overflow: auto;
}

/* 改变被点击节点背景颜色，字体颜色 */
::v-deep .el-tree-node:focus > .el-tree-node__content {
  background-color: #4a9de7 !important;
  color: #fff !important;
}

/*节点失焦时的背景颜色*/
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #4a9de7 !important;
  color: #fff !important;
}

.member-ul {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 10px;
  justify-items: center;

  li {
    width: 100%;
    background-color: #faf6f6;
    border-radius: 10%;
    display: inline-block;
    margin-top: 30px;

    .member-username {
      margin-top: 4px;
      float: left;
      display: inline-block;
      text-indent: 12px;
    }
  }
}

.member-delete {
  margin-top: 2px;
  font-size: 1px;
  float: right;
  margin-right: 12px;
}

.member-avatar {
  margin-top: 2px;
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-left: 12px;
}

.groupMember-right-middle {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.commit {
  left: 0;
  width: 100%;
  bottom: 0;
  display: flex;
  justify-content: center;

  ::v-deep .el-button {
    display: block;
    border-radius: 10px;
    flex: 0.3;
    margin: 20px;
  }
}

::v-deep .el-tree-node {
  margin-top: 10px;
}
</style>